<template>
  <div>
    <div>
    用户名<input type="text" v-model="username">
     密码<input type="text"  v-model="password">
     <button @click="add">新增</button>
  </div>
      <div class="table">
        <div class="td">
            <div class="tr">id</div>
            <div class="tr">姓名</div>
            <div class="tr">密码</div>
            <div class="tr">操作</div>
        </div>
        <div class="td" v-for="item in list">
            <div class="tr">{{item.id}}</div>
            <div class="tr">{{item.username}}</div>
            <div class="tr">{{item.password}}</div>
            <div class="tr" @click="del(item.id)">删除</div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    async created(){
        let {data} = await this.$http.get(this.$api.userinfos)
        this.list=data
    }
    ,
    methods:{
         async add(){
            let username = this.username
            let password = this.password
        let {data}   = await this.$http.post(this.$api.userinfos,{
            username,password
        })
        this.list.push(data)
        },
     async del(key){
        await this.$http.delete(this.$api.userinfos+'/'+key)
        this.list=this.list.filter((item)=>item.id!=key)
        }
    }
}
</script>

<style>
.table{
    width: 600px;   
    margin: 30px auto;
}
.td{
    width: 100%;
    min-height: 30px;
    display: flex;
}
.tr{
flex: 1;
text-align: center;
line-height: 30px;
color: white;
background-color: black;
}
</style>